<template>
	<view class="photo">
		<view class="photo_top">
			<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 80vh;"></camera>
			<canvas type="2d" id="myCanvas" class="canvaspic"></canvas>
			<image class="Back_Through" :src="action_active.dance_action_postures_url" mode="aspectFit"></image>
			<!-- <view class="Back_Through"
				:style="{backgroundImage: 'url(' + action_active.dance_action_postures_url + ') ' }"></view> -->
		</view>
		<view class="photo_bom">
			<stop-time @photoStar="photoStar"></stop-time>
		</view>
	</view>
</template>

<script>
	import stopTime from './stopTime.vue';
	export default {
		components: {
			stopTime,
		},
		data() {
			return {
				action_active: {},
			}
		},
		onLoad(options) {
			const photo = JSON.parse(decodeURIComponent(options.photo))
			console.log(photo)
			this.action_active = photo
		},
		onUnload() {
			console.log('页面被卸载');
		},
		methods: {
			error(e) {
				console.log(e.detail);
			},
			// 开始拍照
			photoStar() {
				 this.createListener();
			},
			// 拍照
			createListener() {
				const context = wx.createCameraContext();
				context.takePhoto({
					quality: 'high',
					success: (res) => {
						wx.uploadFile({
							url: this.$websiteUrl + 'api/system/file/', // 服务器接口地址
							filePath: res.tempImagePath,
							name: 'file', // 文件对应的 key，后端用这个 key 获取文件数据
							formData: {
								// question: this.valueVideo // 如果需要传递其他参数，可以在这里添加
							},
							header: {
								// Authorization : 'JWT ' + uni.getStorageSync('token'),
								'Content-Type': 'multipart/form-data', // 根据实际需求设置
							},
							success: (res) => {
								if (JSON.parse(res.data).code === 2000) {
									const data = {
										...this.action_active,
										photoPath:JSON.parse(res.data).data.file_url
										// photoPath:'media/files/5/c/2.jpg'
									}
									wx.navigateTo({
										url: `/basicPage/AIgenerate/index?photo=${encodeURIComponent(JSON.stringify(data))}`
									});
								}
							},
							fail: (error) => {
								console.error('Upload failed:', error);
								wx.showToast({
									title: '上传失败',
									icon: 'error',
								})
							}
						});
					},
					fail: (err) => {
						console.error('拍照失败:', err);
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.photo {
		position: relative;
		overflow: hidden;
		height: 100vh;

		.photo_top {
			position: relative;
			height: 80%;

			.canvaspic {
				position: absolute;
				left: -9999px;
				top: -9999px;
			}

			.Back_Through {
			position: absolute;
			top: 50%;
			left: 50%;
			// -webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%) scale(1.2);
			width: 100%;
			height: 70vh;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			padding: 0 20rpx;
			// transform: scale(1.1);
			}
		}

		.photo_bom {
			display: flex;
			justify-content: center;
			padding-top: 30rpx;
			margin: 0 auto;
			height: 20%;
			background-color: #000;
		}


	}
</style>